<template>
	<view>
		<picker
			:title="index"
			@change="bindTimeChange"
			@columnchange="columnchange"
			mode="multiSelector"
			:disabled="disabled"
			:class="{ disabled: disabled }"
			:value="index"
			:range="array"
			@cancel="cancelTimeChange"
		>
			<view class="uni-input" v-if="showTime">{{ showTimeY }}</view>
			<view v-else class="placeholder">{{ placeholder }}</view>
		</picker>
	</view>
	<!-- 只读 -->
</template>

<script>
export default {
	name: 'dy-Date-Picker',
	props: {
		timeType: {
			type: String,
			default: () => 'day'
		},
		disabled: {
			type: Boolean,
			default: () => false
		},
		// 是否显示图标
		iconshow: {
			type: Boolean,
			default: () => true
		},
		placeholder: {
			type: String,
			default() {
				return '请选择';
			}
		},
		childValue: {
			default() {
				return '';
			}
		},
		minSelect: {
			type: String,
			default: () => '1900/01/01'
		},
		maxSelect: {
			type: String,
			default: () => '2050/12/31'
		}
	},
	data() {
		return {
			index: [0],
			array: [],
			yearArr: [], // 年份数组
			monthArr: [], // 月份数组
			yearIndex: 0, // 年份选中下标
			showTime: this.moment(this.childValue),
			quarterArr: [] // 季度数组
		};
	},
	methods: {
		moment(strTime) {
			let type = this.timeType;
			if (!strTime) {
				return;
			}
			if (this.timeType == 'quarter' && typeof strTime == 'string' && strTime.indexOf('-') !== -1) {
				return strTime;
			}
			let time = new Date(strTime);
			let y = time.getFullYear();
			let m = time.getMonth() + 1;
			m = m < 10 ? `0${m}` : m;
			let d = time.getDate();
			d = d < 10 ? `0${d}` : d;
			let hh = time.getHours();
			hh = hh < 10 ? `0${hh}` : hh;
			let mm = time.getMinutes();
			mm = mm < 10 ? `0${mm}` : mm;
			let ss = time.getSeconds();
			ss = ss < 10 ? `0${ss}` : ss;
			let value = `${y}/${m}/${d} ${hh}:${mm}:${ss}`;
			if (type === 'year' || type === 'quarter') {
				value = `${y}`;
			}
			if (type === 'quarter') {
				if (m >= 1 && m < 4) {
					value = `${y}-Q1`;
				}
				if (m >= 4 && m < 7) {
					value = `${y}-Q2`;
				}
				if (m >= 7 && m < 10) {
					value = `${y}-Q3`;
				}
				if (m >= 10 && m < 13) {
					value = `${y}-Q4`;
				}
			}
			if (type === 'month') {
				value = `${y}-${m}`;
			}
			if (type === 'day') {
				value = `${y}-${m}-${d}`;
			}
			return value;
		},
		/**
		 * [setDefaultValue 设置默认值]
		 */
		setDefaultValue() {
			let date = this.moment(new Date().getTime());
			this.valueEchoed(date);
		},
		bindDateChange(e) {
			this.childValue = e.target.value;
		},
		dateInit() {
			let type = this.timeType;
			this.array = [];
			this.yearArr = [];
			this.monthArr = [];
			let minDate = this.moment(this.minSelect) || [];
			let maxDate = this.moment(this.maxSelect) || [];
			minDate = minDate ? minDate.split(' ') : '';
			maxDate = maxDate ? maxDate.split(' ') : '';
			minDate = minDate[0] ? minDate[0].split('-') : 1900;
			maxDate = maxDate[0] ? maxDate[0].split('-') : 2050;
			let { monthStar, monthEnd } = '';
			let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900;
			let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050;
			if (type === 'day') {
				let dateStar = minDate[2] ? parseInt(minDate[2]) : 1;
				let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : 31;
			}
			if (type === 'month' || type === 'day') {
				monthStar = minDate[1] ? parseInt(minDate[1]) : 1;
				monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12;
			}

			for (let y = yearStar; y <= yearEnd; y++) {
				let ytext = y < 10 ? `0${y}` : y;
				this.yearArr.push(`${ytext}年`);
				if (type === 'month' || type === 'day') {
					let mGroup = this.getMonthArr(y, yearStar, yearEnd, monthStar, monthEnd, type);
					mGroup.length && this.monthArr.push(mGroup);
				}
			}

			this.array[0] = this.yearArr;
			this.quarterArr = [];
			//添加 季度选项
			if (type === 'quarter') {
				let quarterStar = 1,
					quarterEnd = 4;
				for (let q = quarterStar; q <= quarterEnd; q++) {
					this.quarterArr.push(`Q${q}`);
				}
				this.array[1] = this.quarterArr.length && this.quarterArr;
				return;
			}

			if (type === 'month' || type === 'day') {
				this.array[1] = this.monthArr.length && this.monthArr[0];
			}
			if (type === 'day') {
				this.array[2] = this.getDateArr(parseInt(this.yearArr[0]), parseInt(this.monthArr[0]));
			}
		},

		getMonthArr(y, yearStar, yearEnd, monthStar, monthEnd, type) {
			let mGroup = [];
			let dateGroup = [];
			if (y === yearStar && y !== yearEnd) {
				for (let m = monthStar; m <= 12; m++) {
					let mtext = m < 10 ? `0${m}` : m;
					mGroup.push(`${mtext}月`);
				}
			}

			if (y === yearEnd && y !== yearStar) {
				for (let m = 1; m <= monthEnd; m++) {
					let mtext = m < 10 ? `0${m}` : m;
					mGroup.push(`${mtext}月`);
				}
			}

			if (y !== yearStar && y !== yearEnd) {
				for (let m = 1; m <= 12; m++) {
					let mtext = m < 10 ? `0${m}` : m;
					mGroup.push(`${mtext}月`);
				}
			}

			if (y === yearStar && y === yearEnd) {
				for (let m = monthStar; m <= monthEnd; m++) {
					let mtext = m < 10 ? `0${m}` : m;
					mGroup.push(`${mtext}月`);
				}
			}
			return mGroup;
		},
		getDateArr(y, m) {
			let minDate = this.moment(this.minSelect) || [];
			let maxDate = this.moment(this.maxSelect) || [];
			minDate = minDate.length && minDate.split('-');
			maxDate = maxDate.length && maxDate.split('-');
			let yearStar = minDate[0] ? parseInt(minDate[0]) : 1900;
			let yearEnd = maxDate[0] ? parseInt(maxDate[0]) : 2050;
			let monthStar = minDate[1] ? parseInt(minDate[1]) : 1;
			let monthEnd = maxDate[1] ? parseInt(maxDate[1]) : 12;
			let datearr = [];
			let maxnum = 30;
			let date31 = [1, 3, 5, 7, 8, 10, 12];
			if (date31.includes(m)) {
				maxnum = 31;
			}
			// 判断是平年还是闰年的2月份
			if (m === 2) {
				if (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0)) {
					maxnum = 29;
				} else {
					maxnum = 28;
				}
			}
			let dateStar = minDate[2] ? parseInt(minDate[2]) : 1;
			let dateEnd = maxDate[2] ? parseInt(maxDate[2]) : maxnum;
			if (
				(y !== yearEnd && y !== yearStar) ||
				(y === yearStar && m !== monthStar && m !== monthEnd) ||
				(y === yearEnd && m !== monthEnd && m !== monthStar) ||
				(yearStar === yearEnd && m !== monthStar && m !== monthEnd) ||
				(yearStar !== yearEnd && y === yearEnd && m !== monthEnd) ||
				(y === yearStar && m !== monthStar && y < yearEnd)
			) {
				for (let d = 1; d <= maxnum; d++) {
					let dtext = d < 10 ? `0${d}` : d;
					datearr.push(`${dtext}日`);
				}
			}

			if ((yearStar === yearEnd && y === yearStar && m === monthStar && m !== monthEnd) || (yearStar !== yearEnd && y === yearStar && m === monthStar)) {
				for (let d = dateStar; d <= maxnum; d++) {
					let dtext = d < 10 ? `0${d}` : d;
					datearr.push(`${dtext}日`);
				}
			}

			if ((y === yearEnd && m === monthEnd && m !== monthStar && yearStar === yearEnd) || (y === yearEnd && yearStar !== yearEnd && m === monthEnd)) {
				for (let d = 1; d <= dateEnd; d++) {
					let dtext = d < 10 ? `0${d}` : d;
					datearr.push(`${dtext}日`);
				}
			}

			if (y === yearStar && yearStar === yearEnd && m === monthStar && monthStar === monthEnd) {
				for (let d = dateStar; d <= dateEnd; d++) {
					let dtext = d < 10 ? `0${d}` : d;
					datearr.push(`${dtext}日`);
				}
			}
			return datearr;
		},

		bindTimeChange(e) {
			let timeValue = '';
			let indexArr = e.detail.value;
			let type = this.timeType;
			let year = parseInt(this.array[0][parseInt(indexArr[0]) || 0]);
			let month = '';
			timeValue = year + '';
			if (type === 'quarter') {
				let index = indexArr[1] || 0;
				index = index < 0 ? 0 : index;
				let quarter = this.array[1][index];
				timeValue = `${timeValue}-${quarter}`;
			}
			if (type === 'month' || type === 'day') {
				let index = parseInt(indexArr[1]) || 0;
				index = index < 0 ? 0 : index;
				month = parseInt(this.array[1][index]);
				month = month < 10 ? `0${month}` : month;
				timeValue = `${timeValue}-${month}`;
			}
			if (type === 'day') {
				let dateindex = parseInt(indexArr[2]) || 0;
				dateindex = dateindex < 0 ? 0 : dateindex;
				let date = parseInt(this.array[2][dateindex]);
				date = date < 10 ? `0${date}` : date;
				timeValue = `${timeValue}-${date}`;
			}
			this.showTime = timeValue;
		},
		// 当时发生改变时 加载对应的分钟数组
		columnchange(e) {
			const minIndex = e.detail.value;
			const column = e.detail.column;
			let type = this.timeType;
			if (type === 'quarter') {
				return;
			}
			this.$set(this.index, column, minIndex);
			if (column === 0) {
				this.yearIndex = minIndex;
				if (type === 'month' || type === 'day') {
					this.$set(this.array, 1, this.monthArr[minIndex]);
				}
				if (type === 'day') {
					let monthindex = this.index[1] || 0;

					let newDateArr = this.getDateArr(parseInt(this.yearArr[minIndex]), parseInt(this.monthArr[this.yearIndex][monthindex]));
					this.$set(this.array, 2, newDateArr);
				}
			}
			if (column === 1 && type === 'day') {
				let newDateArr = this.getDateArr(parseInt(this.yearArr[this.yearIndex]), parseInt(this.monthArr[this.yearIndex][minIndex]));
				this.$set(this.array, 2, newDateArr);
			}
		},
		valueEchoed(defaultTime) {
			let type = this.timeType;
			this.index = [0];
			if (this.childValue || defaultTime) {
				let value = this.childValue || defaultTime;
				value = this.moment(value);
				value = value.split('-');
				let index = this.array[0].findIndex(item => parseInt(item) === parseInt(value[0])) || 0;
				index = index === -1 ? 0 : index;
				this.index[0] = index;
				this.yearIndex = index;
				// zfy update start
				if (type === 'quarter') {
					const quarterindex = (this.array[1] && this.array[1].length && this.array[1].findIndex(item => item === value[1])) || 0;
					this.index[1] = quarterindex;
					this.showTime = value[0] + '-' + value[1];
					return;
				}
				// zfy update end
				if (type === 'month' || type === 'day') {
					this.array[1] = this.monthArr.length && this.monthArr[index];
					const monthindex = (this.array[1] && this.array[1].length && this.array[1].findIndex(item => parseInt(item) === parseInt(value[1]))) || 0;
					this.index[1] = monthindex;
				}
				if (type === 'day') {
					let index0 = this.index[0] || 0;
					let index1 = this.index[1] || 0;
					index0 = index0 === -1 ? 0 : index0;
					index1 = index1 === -1 ? 0 : index1;
					let newDay = this.getDateArr(parseInt(this.yearArr[index0]), parseInt(this.monthArr[index0][index1]));
					this.getDateIndex(newDay);
				}
				// zfy update start
				this.showTime = value[0];
				if (type === 'month') {
					this.showTime = value[0] + '-' + value[1];
				}
				if (type === 'day') {
					this.showTime = value[0] + '-' + value[1] + '-' + value[2];
				}
			}
		},
		getDateIndex(newDay) {
			let defaultTime = this.moment(new Date().getTime());
			let value = this.childValue || defaultTime;
			value = this.moment(value);
			value = value.split('-');
			this.array[2] = newDay;
			let dateindex = this.array[2].findIndex(item => parseInt(item) === parseInt(value[2])) || 0;
			this.index[2] = dateindex;
		},
		cancelTimeChange() {
			// this.$emit('cancelTimeChange', { _time: this.showTime, timeY: this.showTimeY });
		}
	},

	watch: {
		// 监测组件最小选择范围发生改变 初始化日期数据
		minSelect() {
			this.dateInit();
			this.setDefaultValue();
		},
		// 监测组件最大可选范围发生改变 初始化日期数据
		maxSelect() {
			this.dateInit();
			this.setDefaultValue();
		},
		childValue() {
			this.showTime = '';
			this.showTime = this.moment(this.childValue);
			this.dateInit();
			this.setDefaultValue();
		},
		// 监听组件类型发生改变
		timeType() {
			this.dateInit();
			this.setDefaultValue();
		}
	},
	computed: {
		showTimeY() {
			let _showtxt = '';
			if (this.timeType == 'quarter') {
				_showtxt = this.showTime;
			}
			let _value = this.showTime.split('-');
			if (this.timeType == 'year') {
				_showtxt = _value[0] + '年';
			}
			if (this.timeType == 'month') {
				_showtxt = _value[0] + '年' + _value[1] + '月';
			}
			if (this.timeType == 'day') {
				// _showtxt = _value[0] + '年' + _value[1] + '月' + _value[2] + '日';
				_showtxt = this.showTime.replace(/-/g, '');
			}
			this.$emit('getData', { _time: this.showTime, timeY: _showtxt });
			return _showtxt;
		}
	},
	created() {
		this.dateInit();
		this.valueEchoed();
		if (!this.childValue) {
			this.setDefaultValue();
		}
	}
};
</script>

<style lang="less">
.tx_r {
	line-height: 48px;
	font-size: 15px;
	font-weight: normal;
	color: #848b9a;
}

.placeholder {
	color: #b5b8c2;
	font-size: 30rpx;
}

.fa-angle-right {
	font-size: 36rpx;
	padding-left: 12rpx;
}
</style>
